<template>
    <div class="wrap">
        <div id="container">
            <!-- 定义一个表格元素 -->
            <section class="detail-header">
                <div class="col-sm-12 console-title">
                    <h5 class="">告警短信模版</h5>
                    <div class="stayRight ">
                        <el-button @click="refreshData()">刷新</el-button>
                        <el-button type="primary" @click="updateAlarmContent()">创建告警短信模版</el-button>
                    </div>
                    
                </div>
            </section>
            <section class="searchBar">
                <div class="form-inline">
                    <div class="pull-left">
                        <div class="searchIpt">
                            <el-input v-model="ctx.searchName" placeholder="请输入要搜索的关键字"></el-input>
                        </div>
                        <div class="searchbtn">
                            <el-button @click="getAlarmContents(1)">搜索</el-button>
                        </div>
                    </div>
                </div>
            </section>
            <section class="tableMain">
                <el-table :data="ctx.dataArr" border style="width: 100%">
                    <el-table-column prop="id" label="告警id"  width="100"> </el-table-column>
                    <el-table-column prop="content" label="告警短信" > </el-table-column>
                    <el-table-column label="操作" width="130">
                      <template scope="scope">
                        <el-button size="small" type="text" @click="updateAlarmContent(scope.row.id)">修改</el-button> 
                        <el-button size="small" type="text" @click="deleteAlarmContent(scope.row.id)">删除</el-button> 
                      </template>
                    </el-table-column>
                </el-table>
                <div class="pageSIzeblock">
                    <div class="pullright">
                        <el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="ctx.currPage" :page-sizes="[10, 20, 50, 100]" :page-size="ctx.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="ctx.totalCount">
                        </el-pagination>
                    </div>
                </div>
            </section>
            
            <el-dialog :title="updateTitle" :visible.sync="updateDialogVislble" class="customDialog team" :lock-scroll="false" :before-close="colseDialog">
                <div class="scoreContainer tagCategory">
                    <el-form :model="updateForm" :rules="updateRules" ref="updateForm" label-width="120px" class="demo-updateForm">
                        <el-form-item label="告警短信" prop="content">
                          <el-input v-model="updateForm.content"  type="textarea" :rows="2" :maxlength="255"></el-input>
                        </el-form-item>
                    </el-form>
                </div>

                <span slot="footer" class="dialog-footer">
                    <div class="aar-gap">
                        <div class="aar-gap-line-b">
                            <div class="aar-gap-line"></div>
                        </div>
                    </div>
                  <el-button @click="cancelSubmit('updateForm')">取 消</el-button>
                  <el-button type="primary" @click="creatSubmit('updateForm')">确 定</el-button>
                </span>
            </el-dialog>

        </div>
    </div>
</template>
<script>
import { save, update, queryAlarmContents, checkRelat, deleteById } from '@/api/alarmContentData'
import { Loading } from 'element-ui'
export default {
  data() {
    return {
      ctx: {
        dataArr: [],
        currPage: 1,
        pageSize: 10,
        totalCount: 0,
        searchName: ''
      },
      updateTitle: '编辑告警短信模板',
      updateDialogVislble: false,
      updateForm: {
        content: ''
      },
      updateRules: {
        content: [
          { required: true, message: '请填写告警短信', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getAlarmContents(1)
  },
  methods: {
    refreshData() {
      this.ctx.searchName = ''
      this.getAlarmContents(1)
    },
    getAlarmContents(currPage) {
      this.ctx.currPage = currPage
      var loadId = Loading.service({ text: '加载中，请稍等' })
      var listQuery = { status: 1, keyword: this.ctx.searchName, currPage: this.ctx.currPage, pageSize: this.ctx.pageSize }
      queryAlarmContents(listQuery).then(response => {
        this.ctx.dataArr = response.data.page.list
        loadId.close()
        this.ctx.totalCount = response.data.page.totalCount
      }).catch(_ => {
        loadId.close()
      })
    },
    handleCurrentChange(currPage) {
      this.ctx.currPage = currPage
      this.getAlarmContents(currPage)
    },
    handleSizeChange(pageSize) {
      this.ctx.pageSize = pageSize
      this.getAlarmContents(1)
    },
    updateAlarmContent(id) {
      if (id) {
        this.updateTitle = '修改告警短信'
        for (var a in this.ctx.dataArr) {
          if (this.ctx.dataArr[a].id === id) {
            this.updateForm = JSON.parse(JSON.stringify(this.ctx.dataArr[a]))
            break
          }
        }
      } else {
        this.updateForm.id = null
        this.updateTitle = '添加告警短信'
      }
      this.updateDialogVislble = true
    },
    deleteAlarmContent(id) {
      checkRelat({ id: id }).then(response => {
        this.$confirm(response.data.msg + '确认删除该记录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteById({ id: id }).then(response => {
            this.getAlarmContents(1)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除！'
          })
        })
      }).catch(_ => {
      })
    },
    cleanData() {
      this.ctx.searchName = ''
      this.updateForm = {
        content: ''
      }
    },
    colseDialog(done) {
      this.$confirm('改动未保存,是否关闭？')
        .then(_ => {
          this.cleanData()
          done()
        })
        .catch(_ => {})
    },
    cancelSubmit(formName) {
      var _this = this
      const done = function() {
        _this.cleanData()
        _this.updateDialogVislble = false
      }
      this.colseDialog(done)
    },
    creatSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var loadId = Loading.service({ text: '正在保存' })
          var jsonData = this.updateForm
          var _this = this
          const resetTable = function() {
            _this.updateDialogVislble = false
            _this.cleanData()
            _this.getAlarmContents(1)
          }
          if (this.updateForm.id) {
            update(jsonData).then(response => {
              loadId.close()
              this.$message({
                showClose: true,
                message: '修改成功',
                type: 'success'
              })
              resetTable()
            }).catch(_ => {
              loadId.close()
            })
          } else {
            save(jsonData).then(response => {
              loadId.close()
              this.$message({
                showClose: true,
                message: '保存成功！',
                type: 'success'
              })
              resetTable()
            }).catch(_ => {
              loadId.close()
            })
          }
        }
      })
    }
  }
}
</script>


<style lang="scss">
.el-table .warning-row {
    background: #dd9999;
}
.el-table .info-row {
    background: #c9e5f5;
}
.detail-header{
    padding: 0 15px;
    margin-bottom: 10px;
    overflow: hidden;
    .console-title{
        padding: 16px 0px;
        min-height: 70px;
        border-bottom: 1px solid #eee;
        position: relative;
        h5{
            display: inline-block;
            text-indent: 8px;
            border-left: 2px solid #88B7E0;
            margin: 8px 0;
            margin-right: 8px;
            vertical-align: top;
        }
        .stayRight{
            position: absolute;
            top: 15px;
            right: 0;
            overflow: hidden;
            .refresh{
                float: left;
                margin-right: 10px;
                color: #333;
                border: 1px solid #ddd;
                background-color: #F7F7F7;
            }
            .creatSite{
                float: left;
            }
        }
    }
}
.searchSel{
    width: 150px;
    display: inline-block;
}
.searchIpt{
    width: 350px;
    display: inline-block;
}
.searchbtn{
    width: 100px;
    display: inline-block;
}
.searchBar{
    padding: 0 10px;
}
.tableMain{
    padding: 10px;
}
.typeform{
    display: inline;
    .form-control{
        border: none;
        padding: 0;
        box-shadow:none;
        display: inline;
        height:30px;
        width:60%;
    }
}
.spantype{
    display: inline;
}
.pageSIzeblock{
    overflow: hidden;
    padding: 10px 0;
    .pullright{
        float: right;
    }
}

.aar-gap-line{height:0;border-bottom:1px dotted #888888;display:inline-block;width:100%;}
.aar-gap-index{background:#0099cc;position:absolute;left:0;top:0;width:40px;height:40px;color:#fff;border-radius:20px;text-align:center;line-height:40px;}
.aar-gap{position:relative;height:50px;}
.aar-gap-title{margin-left:15px;font-weight:bold;font-size:20px;position:absolute;left:40px;top:12px;background:#fff;padding-right:8px;}
.aar-gap-line-c{height:40px;margin:0 0 0 120px;line-height:38px}
.aar-gap-line-b{height:40px;line-height:38px}
.alarmContentTypeClass .el-select{width:800px;}
.delBtn{font-weight:bold;font-size:13px;position:absolute;right:0px;top:8px;background:#fff;}
</style>


